<!-- 目录管理 -->
<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="breadcrumb"
        v-if="isShow"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item> {{ subjectName }} </el-breadcrumb-item>
        <el-breadcrumb-item>目录列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索 -->
      <el-row>
        <!-- 左 -->
        <el-col :span="18">
          <el-form inline>
            <el-form-item label="目录名称" size="small" label-width="80px">
              <el-input
                style="width: 190px"
                v-model.trim="directoryName"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" size="small" label-width="80px">
              <el-select
                size="small"
                v-model="selectValue"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="small">
              <el-button @click="hClear">清除</el-button>
              <el-button type="primary" @click="hSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右 -->
        <el-col :span="6" style="text-align: right">
          <el-button
            type="text"
            icon="el-icon-back"
            class="backBtn"
            @click="$router.back()"
            v-if="isShow"
          >
            返回学科
          </el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="add"
          >
            新增目录
          </el-button>
        </el-col>
      </el-row>

      <!-- 警告 -->
      <el-alert
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px"
      />

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f5', color: '#606266' }"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="subjectName" label="所属学科" />
        <el-table-column prop="directoryName" label="目录名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column label="创建日期" width="160px">
          <template #default="{ row }">
            {{ FormatDateTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" />
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240px">
          <template #default="{ row }">
            <el-button type="text" @click="forbidden(row)">
              {{ row.state === 1 ? "禁用" : "启用" }}
            </el-button>
            <el-button
              type="text"
              :disabled="row.state === 1 ? true : false"
              @click="update(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="del(row)"
              :disabled="row.state === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <PaginationPage
        :page="params.page"
        :pageSize="params.pagesize"
        :total="counts"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      >
      </PaginationPage>

      <!-- 新增目录 -->
      <DirectorysAdd ref="directorysAdd" @updateList="init()"></DirectorysAdd>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, remove, changeState } from '@/api/hmmm/directorys'
import PaginationPage from '../components/pagination-page.vue'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: { PaginationPage, DirectorysAdd },
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      tableData: [], // 表格
      counts: null,
      directoryName: '', // 目录名称
      selectValue: '', // 选择器
      options: [
        { value: 0, label: '禁用' },
        { value: 1, label: '启用' }
      ],
      subjectName: '', // 所属学科名
      isShow: false
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 获取目录列表
    async init () {
      const { data } = await list(this.params)
      this.counts = data.counts
      this.tableData = data.items
    },
    pageChange (page) {
      this.params.page = page
      this.init()
    },
    pageSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.init()
    },
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    },
    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.init()

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 搜索
    hSearch () {
      if (this.directoryName === '' && this.selectValue === '') return this.init()
      this.params.directoryName = this.directoryName
      this.params.state = this.selectValue
      this.init()
    },
    // 清除
    hClear () {
      this.directoryName = ''
      this.selectValue = ''
      delete this.params.directoryName
      delete this.params.state
      this.init()
    },
    // 切换目录状态
    async forbidden (row) {
      row.state === 1 ? (row.state = 0) : (row.state = 1)
      await changeState(row)
      this.$message.success('操作成功')
    },
    // 新增弹框
    add () {
      this.$refs.directorysAdd.showDialog = true
    },
    // 修改弹框
    update (row) {
      this.$refs.directorysAdd.showDialog = true
      this.$refs.directorysAdd.params = { ...row }
    },
    // 从学科去目录时
    async goDirectorys () {
      this.subjectName = this.$route.query.name
      this.params.subjectID = this.$route.query.id
      // 显示面包屑
      if (this.subjectName) this.isShow = true
      // 渲染目录
      await this.init()
    }
  },
  mounted () {
    this.goDirectorys()
  }
}
</script>

<style scoped>
.breadcrumb {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}
</style>
